<template>
	<div class="dispaygrid" v-loading="loading">
		<ul v-if="aclist" class="columnLayout">
			<router-link v-if="aclist" v-for="(item, index) in aclist" :key="index" :to="'/article/' + item.alias + '/' + item.id">
				<li class="Genericpadding coreslistli navwidth">
					<el-image class="PostThumbnails" :src="item.thumbnail ? item.thumbnail : ''" lazy>
						<template #error>
							<div class="image-slot iconfont icon-jiazaitupian"></div>
						</template>
					</el-image>

					<div class="ArticleList">
						<div class="Horizontalspacing minxgap ArticleTitlep">
							<el-tag effect="plain" size="small">热门</el-tag>
							<span class="turngreen Widthlimit">{{ item.title }}</span>
						</div>
						<span class="minfont grey Widthlimits">{{ item.description }}</span>
						<div class="articlebt minfont">
							<div class="Horizontalspacing interval">
								<div class="Horizontalspacing minixgap">
									<el-avatar class="pimgmins center" :src="item.user.Avatar" :size="60">
										<div class="image-slot iconfont icon-setting-role"></div>
									</el-avatar>

									<span v-if="item.user.nickname" class="center">{{ item.user.nickname }}</span>
									<span v-else class="center">{{ item.user.username }}</span>
								</div>
								<div class="courspidname grey center">{{ item.pidname }}</div>
							</div>
							<div class="Horizontalspacing interval grey">
								<div class="Horizontalspacing minixgap">
									<span class="courspidname center">{{ $t('message.DATE') }}</span>
									<span class="center">{{ item.Creationtime }}</span>
								</div>
								<div class="courspidname Horizontalspacing minixgap">
									<span class="center">{{ $t('message.like') }}:</span>
									<span class="center">{{ item.Like.length }}</span>
								</div>
								<div class="courspidname Horizontalspacing minixgap">
									<span class="center">{{ $t('message.View') }}</span>
									<span class="center">{{ item.PageView }}</span>
								</div>
							</div>
						</div>
					</div>
				</li>
			</router-link>
		</ul>

		<span v-else style="color: #909399" class="center">暂无数据</span>

		<el-pagination background class="centerend" :hide-on-single-page="value" :current-page="curPage" @current-change="page" :page-size="pagesize" layout="prev, pager, next" :total="total"> </el-pagination>
	</div>
</template>
<script>
	import { dataRequest as api } from '@/api/api'
	export default {
		name: 'name',
		props: ['userid'],
		data() {
			return {
				loading: true,
				value: true,
				curPage: 1,
				pagesize: 10, //每页显示数量
				total: 0,

				//返回值
				offset: 'DESC',
				tosort: 'time',
				aclist: '',
			}
		},
		methods: {
			// 函数
			async actr() {
				let array = await api(['getarticlepage', { userid: this.userid, perPage: this.pagesize, page: this.curPage, offset: this.offset, tosort: this.tosort }])
				this.loading = false
				console.log(array)
				if (array.code == 200) {
					this.aclist = array.data
					this.total = array.massage / 1
				}
			},
			// fenye
			page(ele) {
				this.loading = true
				this.curPage = ele
				this.actr()
			},
		},
		mounted() {
			// 生命周期:
			if (this.userid) {
				this.actr()
			}
		},
		updated() {
			window.scrollTo({ behavior: 'instant', top: 0 })
		},
	}
</script>

<style scoped>
	.image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200px;
		height: 150px;
		background: var(--el-fill-color-light);
		color: var(--el-text-color-secondary);
		font-size: 30px;
	}
	.image-slot {
		font-size: 30px;
	}
	.qzsolldav {
		color: var(--primary-color);
	}
	.Widthlimit {
		white-space: nowrap; /* 防止换行 */
		overflow: hidden; /* 隐藏超出部分 */
		text-overflow: ellipsis; /* 添加省略号 */
		width: 560px; /* 设置容器宽度 */
	}
	.Widthlimits {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3; /* 设置最大显示行数 */
		overflow: hidden;
		text-overflow: ellipsis;
		width: 597px; /* 设置容器宽度 */
		white-space: normal; /* 允许换行 */
	}
	.newsrow {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}
</style>
<style>
	.coreslistli {
		display: flex;
		flex-direction: row;
		gap: 20px;
	}
	.paginationcen {
		place-self: end center;
	}
</style>
<style>
	@media screen and (max-width: 860px) {
		.el-carousel__container {
			height: 1.2232rem;
		}
		.ArticleList {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;
		}
		.paginationcen {
			place-self: center;
		}
	}
</style>
<style scoped>
	@media screen and (max-width: 860px) {
		.indexconta {
			width: 3.35rem;
			height: 1.2232rem;
			position: relative;
			overflow: hidden;
		}
		.adsbox {
			border-radius: 0.04rem;
			width: 3rem;
			height: 1rem;
			background-color: rgba(144, 147, 153, 0.6);
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			/* border: 1px solid rgb(255, 255, 255, 0.6); */
		}
		.adsflex {
			height: 1rem;
			gap: 0.2rem;
		}
		.adsflex > :first-child {
			font-size: 0.2rem;
			font-weight: bold;
			text-shadow: 0.02rem 0.02rem 0.02rem rgba(0, 0, 0, 0.5);
		}
		.adsflex > :nth-child(2) {
			color: #f2f6fc;
			font-size: 0.15rem;
			text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.5);
		}
		.navwidth {
			width: 100vw;
		}
		.TopPicture {
			height: 1.625rem;
			width: 1.625rem;
		}
		.TopRectangle {
			width: 1.625rem;
			height: 1.625rem;
			border-radius: 0.04rem;
		}
		.Randomcours {
			display: flex;
			flex-wrap: wrap;
			/* 允许标签自动换行 */
			/* 容器宽度为200px */
			/* justify-content: space-between; */

			gap: 0.1rem;
		}
		.coretitle {
			display: none;
		}
		.image-slot {
			width: 1rem;
			height: 0.75rem;

			font-size: 0.1rem;
		}
		.Widthlimits {
			display: none;
		}
		.courspidname {
			display: none;
		}
		.coreslistli {
			gap: 0.1rem;
		}
		.Widthlimit {
			width: 1.9rem; /* 设置容器宽度 */
		}
		.listtruncate-text {
			width: 3.1rem; /* 设置容器宽度 */
		}
		.newsrow {
			justify-content: space-between;
			gap: 0.1rem;
		}
	}
</style>
